<script setup lang='ts' name="admin-role-add">
import type { FormInstance, FormRules } from 'element-plus'

import { rIndexPrivileges, updateAdminRoles, userAuthInfo } from '@fl/api/iam-api'
import { ElMessage } from 'element-plus'
import { nextTick, reactive, ref, toRefs } from 'vue'

const props = withDefaults(defineProps<{
    data?: any
    modelValue: boolean
}>(), {
    data: () => {},
})
const emits = defineEmits(['update:modelValue', 'confirm'])
// const tokenCookie = document.cookie.split('; ')[0]

// console.log(tokenCookie, 'tokenCookietokenCookie')
const { data, modelValue } = toRefs(props)

const form = ref({ description: '', display_name: '', privileges: [] })
// type RuleForm = {
//     description: string
//     display_name: string
//     id: string
//     privileges: string[]
// }
// const form = reactive<RuleForm>(
//     { description: '', display_name: '', id: '', privileges: [] },
// )
const rules = reactive<FormRules<any>>({
    description: [
        { message: '不能为空', required: true, trigger: 'blur' },
    ],
    display_name: [
        { message: '不能为空', required: true, trigger: 'blur' },
    ],
    id: [
        { message: '不能为空', required: true, trigger: 'blur' },
    ],
})
const title = ref('新增')
const formRef = ref()
const authList = ref<any>([])
// function doSave() {
//     updateAdminRoles(form.value).then((res: any) => {
//         console.log(res)
//         close()
//         emits('confirm')
//     })
// }
function getUserAuthInfo() {
    userAuthInfo().then((res) => {
        console.log(res, 'resssssssssssssss')
        getRIndexPrivileges(res.org_id)
    })
}
getUserAuthInfo()
async function getRIndexPrivileges(data) {
    const params = {
        org_id: data,
    }
    rIndexPrivileges(params).then((res: any) => {
        console.log(res, '权限列表')
        res.forEach(((item: any) => {
            authList.value.push(item.code)
        }))
    })
}
async function doSave(formEl: FormInstance | undefined) {
    if (!formEl)
        return
    await formEl.validate((valid, fields) => {
        if (valid) {
            updateAdminRoles(form.value).then((res: any) => {
                console.log(res)
                close()
                emits('confirm')
            })
        }
        else {
            ElMessage.error('输入不能为空')

            console.log('error submit!', fields)
        }
    })
}
function close() {
    emits('update:modelValue', false)
}

async function init(isAdd = true) {
    await nextTick()
    if (isAdd) {
        title.value = '新增'
        form.value = { description: '', display_name: '', privileges: [] }
    }
    else {
        title.value = '编辑'
        form.value = data.value
    }
}

defineExpose({
    init,
})
</script>

<template>
    <el-dialog v-model="modelValue"
               width="600"
               :title="title"
               @close="close"
    >
        <el-form ref="formRef"
                 :model="form"
                 label-width="auto"
                 :rules="rules"
                 style="max-width: 500px"
        >
            <el-form-item label="角色名称"
                          prop="display_name"
            >
                <el-input v-model="form.display_name" />
            </el-form-item>

            <!-- <el-form-item label="角色编码"
                          prop="id"
            >
                <el-input v-model="form.id" />
            </el-form-item> -->

            <el-form-item label="角色描述"
                          prop="description"
            >
                <el-input v-model="form.description" />
            </el-form-item>

            <el-form-item label="权限">
                <el-checkbox-group v-for="(item, index) in authList"
                                   :key="index"
                                   v-model="form.privileges"
                                   privileges
                >
                    <el-checkbox :value="item"
                                 :label="item"
                    >
                        {{ item }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item flex
                          flex-col
            >
                <el-button type="primary"
                           @click="doSave(formRef)"
                >
                    确定
                </el-button>

                <el-button @click="close">
                    取消
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
